<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>吴工寄存器换算省头发工具</title>
    <style>
      h2 {
        text-align: center; /* 设置标题居中 */
      }

      .bit-container {
        display: inline-block; /* 在一行显示 */
        text-align: center;
        margin-right: 5px;
      }
      .bit {
        display: block;
        width: 30px;
        height: 30px;
        margin: 2px auto;
        border: 1px solid #000;
        text-align: center;
        cursor: pointer;
      }
      .bit-label {
        display: block;
      }
      .shift-buttons {
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <h2>吴工寄存器换算省头发工具</h2>
    <div>
      <h3>二进制位选择：</h3>
      <div id="bits-container">
        <!-- 位和位标签将在这里生成 -->
      </div>
      <div class="shift-buttons">
        <button id="shift-left-btn">左移 <<</button>
        <button id="shift-right-btn">右移 >></button>
      </div>
      <h3>结果：</h3>
      <p>二进制：<span id="binary"></span></p>
      <p>十进制：<input type="number" id="decimal-input" /></p>
      <p>十六进制：<input type="text" id="hex-input" /></p>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const bitsContainer = document.getElementById("bits-container");
        const binaryDisplay = document.getElementById("binary");
        const decimalInput = document.getElementById("decimal-input");
        const hexInput = document.getElementById("hex-input");
        const bits = Array.from({ length: 32 }, (_, index) => 0); // 初始化32位为0

        // 生成32个位选择器和标签
        for (let i = 31; i >= 0; i--) {
          const bitContainer = document.createElement("div");
          bitContainer.classList.add("bit-container");

          const bitLabel = document.createElement("div");
          bitLabel.textContent = i; // 显示位编号
          bitLabel.classList.add("bit-label");

          const bit = document.createElement("div");
          bit.classList.add("bit");
          bit.textContent = 0;
          bit.addEventListener("click", function () {
            bits[31 - i] = bits[31 - i] === 0 ? 1 : 0;
            bit.textContent = bits[31 - i];
            updateResult();
          });

          bitContainer.appendChild(bitLabel);
          bitContainer.appendChild(bit);
          bitsContainer.appendChild(bitContainer);
        }

        // 更新结果
        function updateResult() {
          const binary = bits.join("");
          const decimal = parseInt(binary, 2);
          const hex = decimal.toString(16).toUpperCase();
          binaryDisplay.textContent = binary;
          decimalInput.value = decimal;
          hexInput.value = hex;
        }

        // 左移操作
        function shiftLeft() {
          bits.shift();
          bits.push(0);
          updateBitsDisplay();
          updateResult();
        }

        // 右移操作
        function shiftRight() {
          bits.pop();
          bits.unshift(0);
          updateBitsDisplay();
          updateResult();
        }

        // 更新位显示
        function updateBitsDisplay() {
          const bitElements = document.querySelectorAll(".bit");
          bitElements.forEach((bitElement, index) => {
            bitElement.textContent = bits[index];
          });
        }

        // 左右移按钮事件监听
        document
          .getElementById("shift-left-btn")
          .addEventListener("click", shiftLeft);
        document
          .getElementById("shift-right-btn")
          .addEventListener("click", shiftRight);

        // 十进制输入同步二进制和十六进制位
        decimalInput.addEventListener("input", function () {
          let decimal = parseInt(decimalInput.value, 10);
          if (!isNaN(decimal)) {
            if (decimal < 0) {
              decimal = 0; // 设置下限
              decimalInput.value = 0;
            } else if (decimal > 4294967295) {
              decimal = 4294967295; // 设置上限，确保不会超过32位无符号整数的最大值
              decimalInput.value = 4294967295;
            }
            const binary = decimal.toString(2).padStart(32, "0");
            for (let i = 0; i < 32; i++) {
              bits[i] = +binary[i]; // '+'用于将字符转换为数字
            }
            updateBitsDisplay();
            updateResult();
          }
        });

        // 十六进制输入
        hexInput.addEventListener("input", function () {
          const hex = hexInput.value.toUpperCase();
          if (/^[0-9A-F]+$/.test(hex)) {
            let decimal = parseInt(hex, 16);
            if (decimal < 0) {
              decimal = 0;
              decimalInput.value = 0;
            } else if (decimal > 4294967295) {
              decimal = 4294967295;
              decimalInput.value = 4294967295;
            }
            for (let i = 0; i < 32; i++) {
              bits[i] = 0;
            }
            const binary = decimal.toString(2).padStart(32, "0");
            binary.split("").forEach((val, index) => {
              bits[index] = parseInt(val, 10);
            });
            updateBitsDisplay();
            updateResult();
          }
        });

        updateResult(); // 初始化结果显示
      });
    </script>
  </body>
</html>
